<template>
  <div style="width: 100%;">
    <div class="table-options">
      <slot name="table-options" :table="tableSlotData"></slot>
    </div>
    <el-table
      ref="el-table"
      stripe
      highlight-current-row
      :data="tableData"
      :key="randomKey"
      v-loading="loading"
      @selection-change="tableSelectionChange"
      style="width: 100%"
      :default-sort="{prop: 'create_at', order: 'ascending'}"
    >
      <slot name="table-column" :table="tableSlotData" v-if="!tableModel"></slot>
      <template v-else>
        <template v-for="(column, index) in tableColumns">
          <el-table-column v-bind="column" :key="index">
            <template v-if="column.slot"></template>
          </el-table-column>
        </template>
      </template>
    </el-table>
    <div class="table-pagination">
      <div class="table-left-pagination">
        <span style="font-size: 12px; margin-right: 15px;">{{$t('common.pageSizeTotal', { total: tableDataTotal }) }}</span>
        <span style="font-size: 12px;">{{$t('common.perPage')}}</span>
        <el-select v-model="tablePageSize" style="width: 53px; margin: 0 5px;" @change="tableSizeChange">
          <el-option
            v-for="item in [10, 20, 50]"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
        <span style="font-size: 12px;">{{$t('common.item')}}</span>
      </div>
      <div class="table-right-pagination">
        <!-- 去除:current-page="tableCurrentPage" 因为加了段配置之后，日志管理页码不会发生变化-->
        <el-pagination
          @size-change="tableSizeChange"
          @current-change="tableCurrentPageChange"
          :page-sizes="[10, 20, 50]"
          :page-size="tablePageSize"
          :current-page="tableCurrentPage"
          layout="prev, pager, next, jumper"
          :total="tableDataTotal"
        ></el-pagination>
      </div>
    </div>
    <slot name="others-elements" :table="tableSlotData"></slot>
  </div>
</template>
<script lang="ts">
import { reject, throttle } from 'lodash';
import Vue from 'vue';
import { AppModule } from '../../../store/modules/app';
import { PageFiliterModule } from "../../../store/modules/pageFiliter";
import { PageSizeModule } from "../../../store/modules/pageSize";
export default Vue.extend({
  props: {
    pageMethod: Function,
    afterPageMethod: Function,
    tableModel: Object,
    tableName: String,
    tableType: String,
    isGetAdAccounts: Boolean,
    tableForm: [Object],
    immediate: {
      type: Boolean,
      default: true
    },
    isDialopTable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      error: "",
      tableData: [],
      tableQuery: {
        search: ""
      },
      tableCurrentPage: parseInt(this.$route.query.table_page as any) || 1,
      tablePageSize: AppModule.tablePageSize,
      tableDataTotal: 0,
      tableSelectRows: [],
      throttle: null,
      isSizeChange: false,
      randomKey: null // 用于tableData刷新
    };
  },
  computed: {
    pageQuery() {
      return {
        page: (this as any).tableCurrentPage,
        page_size: (this as any).tablePageSize // 分页
      };
    },
    tableSlotData() {
      return {
        loading: (this as any).loading,
        error: (this as any).error,
        data: (this as any).tableData,
        query: (this as any).tableQuery,
        currentPage: (this as any).tableCurrentPage,
        pageSize: (this as any).tablePageSize,
        dataTotal: (this as any).tableDataTotal,
        selectRows: (this as any).tableSelectRows,
        refresh: (this as any).refresh,
        deleteRefresh: (this as any).deleteRefresh
      };
    },
    tableColumns(){
      let result = []
      try {
        for(const key in (this as any).tableModel){
          let table = (this as any).tableModel[key].table;
          if(table){
            const column: any = {};
            for(const tableKey in table){
              if(table[tableKey].constructor === Function){
                table[tableKey] = table[tableKey].call((this as any));
              }
              column[tableKey] = table[tableKey];
            }
            result.push(column);
          }
        }
        return result;
      } catch(e){
        return result;
      }
    }
  },
  created() {
    (this as any).throttle = throttle((this as any).tableCurrentPageChange, 300, {
      trailing: true,
      leading: false
    });
    if (localStorage.getItem('pageSize')) {
      AppModule.SetTablePageSize(parseInt(localStorage.getItem('pageSize') as any));
    }
  },
  mounted() {
    (this as any).getPageSize();
    if ((this as any).tableName) {
      (this as any).useCacheFiliter();
    }
    if ((this as any).immediate) {
      (this as any).getPage();
    }
  },
  watch: {
    tableForm(newValue, oldValue) {
      (this as any).loading = true;
      (this as any).tableQuery = Object.assign({}, (this as any).tableQuery, newValue);
      (this as any).throttle.cancel();
      (this as any).throttle();
    }
  },
  methods: {
    getPage() {
      if((this as any).isSizeChange) {
        (this as any).pageQuery.page = 1;
      }
      let reqParams = Object.assign({}, (this as any).pageQuery, (this as any).tableQuery);
      (this as any).putCacheFiliter();
      (this as any).loading = true;
      return (this as any).pageMethod(reqParams)
      ?.then((res: any) => {
        (this as any).tableDataTotal = res.total;
        (this as any).loading = false;
        (this as any).isSizeChange = false;
        if (res.rows && res.rows.length > 0) {
          (this as any).tableData = res.rows;
        } else {
          (this as any).tableData = [];
        }
        const currentPage = (res.previous || res.next) ? this.getPageByPrevNext(res.previous, res.next) : (this as any).pageQuery.page;
        this.tableCurrentPage = parseInt(currentPage);

        this.afterPageMethod ? this.afterPageMethod(res)  : "";
      })
      .catch((error: any) => {
        (this as any).error = error.message;
        (this as any).$message.warning((this as any)._("Failed to request table data."));
        (this as any).loading = false;
        (this as any).isSizeChange = false;
      });
    },
    getPageSize() {
      const pageSize = AppModule.tablePageSize;
      if (pageSize) {
        (this as any).tablePageSize = pageSize;
      }
    },
    refresh(isSearch?: any) {
      if (isSearch === true) {
        (this as any).tableCurrentPage = 1;
      }
      return new Promise((resolve,reject)=>{
        resolve((this as any).getPage())
      })
    },
    deleteRefresh(deleteTotal: number) {
      if (deleteTotal >= (this as any).tableData.length && (this as any).tableCurrentPage > 1) {
        (this as any).tableCurrentPage -= 1;
      }
      (this as any).refresh();
    },
    tableSizeChange(value: any) {
      AppModule.SetTablePageSize(value);
      localStorage.setItem('pageSize', value);
      (this as any).getPageSize();
      (this as any).isSizeChange = true;
      (this as any).getPage();
      // if((PageFiliterModule as any)[(this as any).isDialopTable
      //   ? "changeDialopTablePageSize"
      //   : "changeCommonTablePageSize"
      // ]){
      //   (PageFiliterModule as any)[(this as any).isDialopTable
      //   ? "changeDialopTablePageSize"
      //   : "changeCommonTablePageSize"
      //   ](value);
      // }
      
    },
    tableCurrentPageChange(value: number) {
      (this as any).tableCurrentPage = value;
      (this as any).getPage();
    },
    tableSelectionChange(value: any) {
      (this as any).tableSelectRows = value;
      (this as any).$emit("selection-change", value);
    },
    tableSearch() {
      (this as any).loading = true;
      (this as any).throttle.cancel();
      (this as any).throttle();
    },
    /**
     * 要求表格此次查询使用缓存中的filiter
     */
    useCacheFiliter() {
      /**
       * 表格查询filiter的缓存与表格名称相关
       * 需要保证表格名称存在并不重复，才能使用
       */
      if (!(this as any).tableName) {
        return;
      }
      const filiterKey = (this as any).tableName + "_TableFiliter";
      const pageFiliter =
        PageFiliterModule.commonTablePageFiliter[filiterKey] || {};
      (this as any).tableQuery = pageFiliter.tableQuery || (this as any).tableQuery;
    },
    /**
     * 修改表格filiter的缓存
     */
    putCacheFiliter() {
      if (!(this as any).tableName) {
        return;
      }
      const filiterKey = (this as any).tableName + "_TableFiliter";
      PageFiliterModule.changeCommonTablePageFiliter({
        key: filiterKey,
        option: {
          tableQuery: (this as any).tableQuery
        }
      });
    },
    getPageByPrevNext(prevStr: string, nextStr: string) {
      let currentPage: any = 0;
      const prevOpt = this.parseQueryString(prevStr);
      const nextOpt = this.parseQueryString(nextStr);

      if (!prevStr) {
        currentPage = 1;
      } else if (!prevOpt.page) {
        currentPage = 2;
      } else {
        currentPage = parseInt(prevOpt.page) + 1;
      }

      return currentPage;
    },
    parseQueryString(url: string){
      let result: any = {};
      
      if(!url || ('string' !== typeof url && Object.prototype.toString.call(url) != "[object String]" )){
          return result;
      }
      const str = url.split("?");
      const items = str && str.length > 1 ? str[1].split("&") : [];
      let arr = [];

      for(let i=0; i<items.length; i++) {
          arr=items[i].split("=");
          result[arr[0]]=arr[1];
      }

      return result;
    },
    updateRow(indexRow: { index: number, row: any }) {
      for (const key in indexRow.row) {
        (this as any).tableData[indexRow.index][key] = indexRow.row[key];
      }
    }
  }
});
</script>

<style lang="scss" scoped>
@font-face {font-family: "iconfont";
  src: url('../../../icons/iconfont/iconfont.eot?t=1612681598910'); /* IE9 */
  src: url('../../../icons/iconfont/iconfont.eot?t=1612681598910#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('../../../icons/iconfont/iconfont.woff?t=1612681598910') format('woff'),
  url('../../../icons/iconfont/iconfont.ttf?t=1612681598910') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('../../../icons/iconfont/iconfont.svg?t=1612681598910#iconfont') format('svg'); /* iOS 4.1- */
}
.table-options {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

.table-pagination {
  height: 28px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .table-left-pagination {
    margin-top: -4px
  }

  ::v-deep .el-select, ::v-deep .el-input {
    height: 28px;

    input, .el-input__inner {
      height: 28px !important;
      // padding: 0 0 0 10px;
    }

    .el-input__suffix {
      // margin-top: 7px;
      margin-right: -4px;

      .el-select__caret.el-input__icon.el-icon-arrow-up::before {
        font-family: 'iconfont' !important;
        font-size: 12px;
        color: #606266;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "\e67e" !important; /** 想用这种方式替换图标，不明确为什么不显示 */
      }
    }
  }

  ::v-deep .el-pagination__jump {
    font-size: 12px;
    margin-top: -2px
  }
}

::v-deep .el-table__header {
  border-top: unset;
  border-left: unset;
  border-right: unset;

  th {
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: #F4F5F7;
    border-bottom-color: #E9EBEF;

    .cell {
      color: #031129;
      font-size: 12px;
      line-height: 150%;
      font-weight: normal;
      text-overflow: unset;
      padding: 6px 0px;
      padding-left: 10px;
      border-left: 2px solid #FFFFFF;
    }
  }

  th:first-child {
    .cell {
      padding-left: 10px;
      border-left: 2px !important;
    }
  }

  th.el-table-column--selection {
    .cell {
      padding-left: 0px;
      border-left: unset;
    }
    
  }
}

::v-deep .el-table__row {
  td {
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom-color: #E9EBEF;

    .cell {
      color: #333333;
      font-size: 12px;
      font-weight: normal;
      text-overflow: unset;
      line-height: 150%;
      min-height: 20px !important;

    }
  }
}

::v-deep .el-table__row--striped td {
  background-color: #F5F8FF !important;
}
</style>
